<template>
  <div class="copy">
    <el-row>
      <el-col :span="6" v-for="item in footerNav" :key="item.footT">
        <div class="grid-content">
          <router-link :to="{name:(item.name),params:{pageName:(item.footT)}}">
            <i :class="item.icon"></i>
            <p>{{item.footT}}</p>
          </router-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      footerNav: [
        {icon: 'icon-home', footT: 'Home', name: 'Home'},
        {icon: 'icon-products', footT: 'Products', name: 'Products'},
        {icon: 'icon-project', footT: 'Project', name: 'AsiaCases'},
        {icon: 'icon-chat', footT: 'Inquiry', name: 'Contact'}
      ]
    }
  }
}
</script>
<style scoped lang="css">
.copy{
  background: #f7f7f8;
  border-top: 1px solid #b5b3b3;
  padding-top: 10px;
  padding-bottom: 5px;
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
}
.copy i{
  font-size: 28px;
}
.copy p{
  margin: 0;
  color: #333;
  font-size: 14px;
}
.router-link-exact-active p{
  color: #fa4554 !important
}
.router-link-exact-active .icon-project:before,.router-link-exact-active .icon-products:before,.router-link-exact-active .icon-home:before,.router-link-exact-active .icon-chat:before{
  color: #fa4554 !important
}
</style>
